<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>资源</title>
    <link rel="stylesheet" href="../../../static/libs/layui/css/layui.css">
    <link rel="stylesheet" href="../../../static/css/commom.css">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <select id="resourceType" lay-verify="required">
                            <option value="">请选择</option>
                            <option value="0">源码</option>
                            <option value="1">工具</option>
                            <option value="2">电子书</option>
                        </select>                    </div>
                    <div class="layui-inline">
                        <button id="btnSearch" class="layui-btn icon-btn">
                            <i class="layui-icon layui-icon-search"></i>搜索
                        </button>
                    </div>
                    <div class="layui-inline">
                        <button id="addLink_btn" class="layui-btn icon-btn">
                            <i class="layui-icon layui-icon-add-1"></i>添加
                        </button>
                    </div>
                </div>
            </div>
            <table class="layui-table" id="categoryTable" lay-filter="categoryTable"></table>
        </div>
    </div>
</div>
<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="tableStateUser">
    <input type="checkbox" lay-filter="ckStateUser" value="{{d.newsStatus}}" lay-skin="switch"
           lay-text="正常|锁定" {{d.newsStatus==0?'checked':''}}/>
</script>
<script type="text/html" id="categoryAdd">
    <div class="layui-fluid ">
        <div class="layui-form layui-row layui-col-space10" id="categoryForm" lay-filter="categoryForm">
            <input name="id" hidden>
            <div class="layui-col-md9 layui-col-xs12">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md9 layui-col-xs7">
                        <div class="layui-form-item magt3">
                            <label class="layui-form-label">标题</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input newsName" name="title" lay-verify="newsName"
                                       placeholder="请输入文章标题">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">内容摘要</label>
                            <div class="layui-input-block">
                                <textarea placeholder="请输入内容摘要" name="abstractContent"
                                          class="layui-textarea abstract"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-xs5">
                        <div class="layui-upload-list thumbBox mag0 magt3">
                            <img class="layui-upload-img thumbImg">
                        </div>
                        <input name="thumbimg" id="thumbimg" hidden>
                    </div>
                </div>
                <div class="layui-form-item magb0">
                    <label class="layui-form-label">文章内容</label>
                    <div class="layui-input-block">
                        <textarea class="layui-textarea layui-hide" name="content" lay-verify="content"
                                  id="news_content"></textarea>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3 layui-col-xs12">
                <blockquote class="layui-elem-quote title magt10"><i class="layui-icon">&#xe609;</i> 发布</blockquote>
                <div class="border">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i class="layui-icon">&#xe60e;</i> 分　类</label>
                        <div class="layui-input-block newsStatus">
                            <select name="resourceType" lay-verify="required">
                                <option value="0">源码</option>
                                <option value="1">工具</option>
                                <option value="2">电子书</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item magt3">
                        <label class="layui-form-label"><i class="layui-icon layui-icon-user"></i>作  者</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input newsName" name="author" lay-verify="newsName"
                                   placeholder="请输入作者">
                        </div>
                    </div>
                    <hr class="layui-bg-gray"/>
                    <div class="layui-right">
                        <a class="layui-btn layui-btn-sm" lay-filter="categorySubmit" lay-submit><i
                                class="layui-icon">&#xe609;</i>发布</a>
                        <a class="layui-btn layui-btn-primary layui-btn-sm" id="test8">上传附件</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>
<!-- 表单弹窗 -->
<!--    <script type="text/html" id="categoryAdd">
        <form id="categoryForm" lay-filter="categoryForm" class="layui-form model-form">
            <div class="layui-form-item">
                <label class="layui-form-label">导航名称</label>
                <div class="layui-input-block">
                    <select name="newsStatus" lay-verType="tips" lay-verify="required">
                        <option value="0">保存草稿</option>
                        <option value="1">等待审核</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">关键词</label>
                <div class="layui-input-block">
                    <input name="newsName" placeholder="请输入账号" type="text" class="layui-input" maxlength="20"
                        lay-verType="tips" lay-verify="required" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                    <textarea name="newsName" placeholder="请输入内容" class="layui-textarea" maxlength="200"></textarea>
                </div>
            </div>
            <div class="layui-form-item text-right">
                <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
                <button class="layui-btn" lay-filter="categorySubmit" lay-submit>保存</button>
            </div>
        </form>
    </script>-->
<script src="../../../static/libs/layui/layui.js"></script>
<script src="../../../static/js/common.js"></script>
<script>
    layui.use(['layer', 'table', 'form', 'util', 'laydate', 'layedit', "admin", "upload"], function () {
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;
        var upload = layui.upload;
        var layedit = layui.layedit;
        var admin = layui.admin;
        var $ = layui.jquery;
        //渲染表格
        var insTb = table.render({
            elem: '#categoryTable',
            // url: '../../static/json/newsList.json',
            url: '/blogResourcesController/getBlogResources',
            page: true,
            cellMinWidth: 100,
            cols: [
                [
                    {type: "checkbox", fixed: "left", width: 50},
                    {field: 'title', title: '标题', width: 60, align: "center"},
                    {field: 'author', title: '作者'},
                    {
                        field: 'resourceType', title: '资源分类', align: 'center', templet: function (d) {
                           if (d.resourceType==0)
                               return "源码";
                           if (d.resourceType==1)
                               return "工具";
                            if (d.resourceType==2)
                                return "电子书";
                        }
                    },
                    /*  {field: 'newsName', title: '描述', align:'center', width:350},
                      {field: 'newsStatus', title: '状态',  align:'center',templet:"#tableStateUser"},*/
                    {
                        field: 'createTime', title: '发布时间', align: 'center', minWidth: 110, templet: function (d) {
                            return d.createTime.substring(0, 10);
                        }
                    },
                    {title: '操作', width: 130, templet: '#tableBar', fixed: "right", align: "center"}
                ]
            ]
        });
        // 添加按钮点击事件
        $('#addLink_btn').click(function () {
            showEditModel();
        });
        //搜索【此功能需要后台配合，所以暂时没有动态效果演示】
        $("#btnSearch").on("click",function(){
            table.reload("categoryTable",{
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                    resourceType: $('#resourceType option:selected').val() //搜索的关键字
                }
            })
        });
        // 工具条点击事件
        table.on('tool(categoryTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            } else if (layEvent === 'del') { // 删除
                doDel(data.id);
            }
        });

        // 删除
        function doDel(userId, nickName) {
            layer.confirm('确定要删除本条数据吗吗？', {
                skin: 'layui-admin-skin',
                shade: .1
            }, function (i) {
                layer.close(i);
                layer.load(2);
                $.get('/blogResourcesController/deleteBlogResourcesById', {
                    id: userId
                }, function (res) {
                    layer.closeAll('loading');
                    if (res.success) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload({}, 'data');
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'json');
            });
        }

        // 显示表单弹窗
        function showEditModel(mUser) {
            layer.open({
                type: 1,
                skin: 'layui-admin-skin-w',
                area: ['100%', '100%'],
                scrollbar: false,
                title: (mUser ? '修改' : '添加') + '分类',
                content: $('#categoryAdd').html(),
                success: function (layero, dIndex) {
                    var url = mUser ? '/blogResourcesController/updateBlogResources' : '/blogResourcesController/insertBlogResources';
                    // 回显数据
                    form.val('categoryForm', mUser);
                    if (mUser){
                        $(".thumbImg").attr("src", mUser.thumbimg);
                    }
                    //创建一个编辑器
                    var editIndex = layedit.build('news_content', {
                        height: 535,
                        uploadImage: {
                            url: "/imgUpload/imUploadLayedit"
                        }
                    });
                    //用于同步编辑器内容到textarea
                    layedit.sync(editIndex);

                    upload.render({
                        elem: '.thumbBox',
                        url: '/imgUpload/imgload',
                        method: "post",  //此处是为了演示之用，实际使用中请将此删除，默认用post方式提交
                        done: function (res, index, upload) {
                            var num = parseInt(4 * Math.random());  //生成0-4的随机数，随机显示一个头像信息
                            /* $('#userFace').attr('src', res.data.urlLoad);
                             $('#headImg').val(res.data.urlLoad);*/
                            $('.thumbImg').attr('src', res.data.urlLoad);
                            $('#thumbimg').val(res.data.urlLoad);
                            $('.thumbimg').css("background", "#fff");
                        }
                    });
                    // 附件上传
                    upload.render({
                        elem: '#test8'
                        ,url: 'https://httpbin.org/post' //改成您自己的上传接口
                        ,auto: false
                        //,multiple: true
                        ,done: function(res){
                            layer.msg('上传成功');
                            console.log(res)
                        }
                    });

                    // 表单提交事件
                    form.on('submit(categorySubmit)', function (data) {
                        data.field.content = layedit.getContent(editIndex);
                        layer.load(2);
                        $.get(url, data.field, function (res) {
                            layer.closeAll('loading');
                            if (res.success) {
                                layer.close(dIndex);
                                layer.msg(res.msg, {icon: 1});
                                insTb.reload({}, 'data');
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, 'json');
                        return false;
                    });
                }
            });
        }
    })
</script>
</body>
</html>